<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>111</title>
    <script src="/static/plugins/js/jquery-1.10.2.min.js"></script>
    <script src="/static/plugins/js/chart/echarts-5.4.2.min.js"></script>



    <style>
        body{
            background-color: #010a37;
        }
        /* 监控 */
        .roll-table{
            height: 20rem;
            flex: 1;
        }


        .roll-table .roll-table-con{
            height: 100%;
            flex: 1;

        }

        .roll-table .roll-table-head{
            background: rgba(255, 255, 255, 0.1);
            font-size: 0.583rem;
            padding: 0.5rem 1.5rem;
            color: #68d8fe;
            display: flex;
            justify-content: space-between;
            line-height: 1.05;
        }
        /*.roll-table .roll-table-col:nth-child(1) {*/
        /*    width: 3.2rem;*/
        /*}*/
        /*.roll-table .roll-table-col:nth-child(2) {*/
        /*    width: 8.4rem;*/
        /*    !* 不换行  一行省略*!*/
        /*    white-space: nowrap;*/
        /*    overflow: hidden;*/
        /*    text-overflow: ellipsis;*/
        /*}*/
        /*.roll-table .roll-table-col:nth-child(3) {*/
        /*    width: 3.2rem;*/
        /*}*/
        /*.roll-table .marquee-view{*/
        /*    position: absolute;*/
        /*    top: 1.6rem;*/
        /*    bottom: 0;*/
        /*    width: 100%;*/
        /*    overflow: hidden;*/
        /*}*/

        .roll-table .roll-table-row{
            line-height: 1.05;
            padding: 0.5rem 1.5rem;
            color: #61a8ff;
            font-size: 0.5rem;
            position: relative;
            display: flex;
            justify-content: space-between;
        }
        .roll-table .roll-table-row:hover{
            color:#68d8ff;
            background: rgba(255, 255, 255, 0.1);
        }


        /*.roll-table .marquee-view{*/
        /*    position: absolute;*/
        /*    top: 1.6rem;*/
        /*    bottom: 0;*/
        /*    width: 100%;*/
        /*    overflow: hidden;*/
        /*}*/




        /* ------------------------------------------------------------动画 */
        @keyframes row{
            0%{}
            100%{
                transform: translateY(-50%);
            }
        }
        /* 调用动画 */
        .roll-table .roll-table-marquee {
            /* //infinite永久调用动画 */
            animation: row  10s linear infinite;
        }
        /*鼠标划入 停止动画  */
        .roll-table .roll-table-marquee:hover {
            animation-play-state: paused;
        }



    </style>
</head>
<body>
<div class="roll-table">
    <div class="roll-table-head">
        <span class="roll-table-col">故障时间</span>
        <span class="roll-table-col">设备地址</span>
        <span class="roll-table-col">异常代码</span>
    </div>
    <div class="roll-table-con">
        <div class="roll-table-marquee">
            <div class="roll-table-row">
                <span class="roll-table-col">20180701</span>
                <span class="roll-table-col">11北京市昌平西路金燕龙写字楼</span>
                <span class="roll-table-col">1000001</span>
            </div>
            <div class="roll-table-row">
                <span class="roll-table-col">20190601</span>
                <span class="roll-table-col">北京市昌平区城西路金燕龙写字楼</span>
                <span class="roll-table-col">1000002</span>
            </div>
            <div class="roll-table-row">
                <span class="roll-table-col">20190704</span>
                <span class="roll-table-col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="roll-table-col">1000003</span>
            </div>
            <div class="roll-table-row">
                <span class="roll-table-col">20180701</span>
                <span class="roll-table-col">北京市昌平区建路金燕龙写字楼</span>
                <span class="roll-table-col">1000004</span>
            </div>
            <div class="roll-table-row">
                <span class="roll-table-col">20190701</span>
                <span class="roll-table-col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="roll-table-col">1000005</span>
            </div>
            <div class="roll-table-row">
                <span class="roll-table-col">20190701</span>
                <span class="roll-table-col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="roll-table-col">1000006</span>
            </div>
            <div class="roll-table-row">
                <span class="roll-table-col">20190701</span>
                <span class="roll-table-col">北京市昌平区建西路金燕龙写字楼</span>
                <span class="roll-table-col">1000007</span>
            </div>
            <div class="roll-table-row">
                <span class="roll-table-col">20190701</span>
                <span class="roll-table-col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="roll-table-col">1000008</span>
            </div>
            <div class="roll-table-row">
                <span class="roll-table-col">20190701</span>
                <span class="roll-table-col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="roll-table-col">1000009</span>
            </div>
            <div class="roll-table-row">
                <span class="roll-table-col">20190710</span>
                <span class="roll-table-col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="roll-table-col">1000010</span>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/static/plugins/bi/js/china.js?v=ssasasas"></script>
<script src="/static/plugins/bi/js/myMap.js?v=ssasasas"></script>

</html>
